<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    	<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>行情</title>
		<link rel="stylesheet" href="/zc/css/style.css" />
		<link rel="stylesheet" href="/zc/css/index.css" />
		<link rel="stylesheet" href="/zc/css/login.css" />
		<link href="/zc/css/swiper.min.css" rel="stylesheet">
		<link rel="stylesheet" href="/zc/css/swiper-3.2.7.min.css" />
		<script src="/zc/js/flexible.js"></script>
		<script src="/zc/js/flexible_css.js"></script>
		<script src="/zc/js/template.js"></script>
		<script src="/zc/js/unslider.min.js"></script>
	    <script src="/zc/js/jquery.min.js"></script>
		<script type="text/javascript" src="/zc/js/swiper-3.4.0.jquery.min.js" ></script>
		
		<style>
		.container {
			height: 1rem;
		}
		.swiper1 {
		width: 100%;
		}
		
		.swiper1 .swiper-slide {
		text-align: center;
		font-size: .35rem;
		height: 1rem;
		background: #F2F2F2;
		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		cursor: pointer;
		}
		.swiper2 {
		width: 100%;
		}
		.swiper1 .selected {
		color: #fff;
		background: #03BE87;
		}
		
		.biaoti{
			width: 100%;
			background: #F2F2F2;
			overflow: hidden;
			margin-top: .3rem;
		}
		.biaoti_p1,.biaoti_p2,.biaoti_p3{
			float: left;
			font-size: .35rem;
			color: #666;
			line-height: .65rem;
		}
		.biaoti_p1{
			margin-left: .3rem;
		}
		.biaoti_p2{
			margin-left:2.3rem;
		}
		.biaoti_p3{
			float: right;
			margin-right: .3rem;
		}
		#bh{
			background: red;
		}
		#zh{
			color: red;
		}
		.bzmxb01 img{
			width:.5rem;
		}
		</style>
	</head>
	<body>
		<div class="header">
			<span>行情</span>
			<a href="javascript:history.go(-1)" class="return"></a>
		</div>
		<div style="height: 1rem;"></div>	
		
		
		<div class="container">
			<div class="swiper-container swiper1">
				<div class="swiper-wrapper">
					<div class="swiper-slide selected"><img style="width: .4rem;" src="/zc/img/xingxing_w.png"></div>
					<div class="swiper-slide">USDT</div>
					<div class="swiper-slide">ETH</div>
					<div class="swiper-slide">BTC</div>
					<!-- <div class="swiper-slide">EOS</div> -->
				</div>
			</div>
			
			<div class="biaoti">
				<p class="biaoti_p1">名称/成交量</p>
				<p class="biaoti_p2">最新价</p>
				<p class="biaoti_p3">24H涨跌</p>
			</div>
			<!-- swiper2 -->
			<div class="swiper-container swiper2">
			<div class="swiper-wrapper">
			<div class="swiper-slide ">
				<div class="cxk1" style="width: 90%;margin: auto;">

				</div>
			</div>
			<div class="swiper-slide">
				<div class="cxk2" style="width: 90%;margin: auto;">

				</div>
			</div>
			<div class="swiper-slide">
				<div class="cxk3" style="width: 90%;margin: auto;">

				</div>
			</div>
			<div class="swiper-slide">
				<div class="cxk4" style="width: 90%;margin: auto;">

				</div>
			</div>
			<div class="swiper-slide">
				<div class="cxk5" style="width: 90%;margin: auto;">

				</div>
			</div>
			
			</div>
			</div>
			 
		</div>		
	</body>
	
	<script type="text/html" id='tpl'>
		{{each list v}}
		<div class="bzmxb">
			<div class="bzmxb01 jjj{{v.collect}}" style="width: 10%" onclick="shouc(this)" data-id="{{v.id}}">
				
				<%if(v.collect == 1){%>    
					<img src="/zc/img/index03.png">
				<%}else{%>
					<img src="/zc/img/a_xingxing.png">
				<%}%>
				
			</div>
			<div class="bzmxb02">
				<p class="bzmxb02_s">{{v.title}}<span>/{{v.title1}}</span></p>
				<p class="bzmxb02_x">成交量{{v.baseVolume}}</p>
			</div>
			<div class="bzmxb03">
				<p class="bzmxb03_s">{{v.last}}</p>
				<p class="bzmxb03_x">￥{{v.cny}}</p>
			</div>
			<div class="bzmxb04">
				<a href="/index/index/index_kline.html?bidui={{v.title}}_{{v.title1}}">
				<p>{{v.percentChange}}%</p>
				</a>
			</div>
		</div>
		{{/each}}
	</script>
	<script>
	    $(function() {

	    	loadList1();
			// var type1 = '1';
			var type2 = 'usdt';
			var type3 = 'eth';
			var type4 = 'btc';
			var type5 = 'eos';
			function loadList1(){
				$.ajax({
					type: "POST",
					url:"/index/apihq/collect",
					// data:{types:type1},
					dataType: "jsonp",
					success: function (res) {
						console.log(res)
						$('.cxk1').append(template("tpl", res));
					}
				});
			}
			function loadList2(){
				$.ajax({
					type: "POST",
					url:"/index/apihq/markect",
					data:{types:type2},
					dataType: "jsonp",
					success: function (res) {
						console.log(res)
						$('.cxk2').append(template("tpl", res));
					}
				});
			}
			function loadList3(){
				$.ajax({
					type: "POST",
					url:"/index/apihq/markect",
					data:{types:type3},
					dataType: "jsonp",
					success: function (res) {
						console.log(res)
						$('.cxk3').append(template("tpl", res));
					}
				});
			}
			function loadList4(){
				$.ajax({
					type: "POST",
					url:"/index/apihq/markect",
					data:{types:type4},
					dataType: "jsonp",
					success: function (res) {
						console.log(res)
						$('.cxk4').append(template("tpl", res));
					}
				});
			}
			function loadList5(){
				$.ajax({
					type: "POST",
					url:"/index/apihq/markect",
					data:{types:type5},
					dataType: "jsonp",
					success: function (res) {
						console.log(res)
						$('.cxk5').append(template("tpl", res));
					}
				});
			}
	    	
		


			function setCurrentSlide(ele, index) {
			$(".swiper1 .swiper-slide").removeClass("selected");
			ele.addClass("selected");
			//swiper1.initialSlide=index;
			console.log(index);
				if(index==0){
					$('.cxk1').html('');
					loadList1();
				}else if(index==1){
					$('.cxk2').html('');
					loadList2()
				}else if(index==2){
					$('.cxk3').html('');
					loadList3()
				}else if(index==3){
					$('.cxk4').html('');
					loadList4()
				}else if(index==4){
					$('.cxk5').html('');
					loadList5()
				}
			}
			 
			var swiper1 = new Swiper('.swiper1', {
			//    设置slider容器能够同时显示的slides数量(carousel模式)。
			//    可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。
			//    loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
			slidesPerView: 5.5,
			paginationClickable: true,//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
			spaceBetween: 10,//slide之间的距离（单位px）。
			freeMode: true,//默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
			loop: false,//是否可循环
			onTab: function(swiper) {
			var n = swiper1.clickedIndex;
			}
			});
			swiper1.slides.each(function(index, val) {
			var ele = $(this);
			ele.on("click", function() {
			setCurrentSlide(ele, index);
			swiper2.slideTo(index, 500, false);
			//mySwiper.initialSlide=index;
			});
			});
			 
			var swiper2 = new Swiper('.swiper2', {
			//freeModeSticky  设置为true 滑动会自动贴合  
			direction: 'horizontal',//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
			loop: false,
			autoHeight: true,//自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
			onSlideChangeEnd: function(swiper) {  //回调函数，swiper从一个slide过渡到另一个slide结束时执行。
			var n = swiper.activeIndex;
			setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
			swiper1.slideTo(n, 500, false);
			}
			});
		});
		function shouc(th){
			if($(th).hasClass('jjj0')){


				$(th).removeClass('jjj0');
				$(th).addClass('jjj1');
				$(th).find('img').attr('src','/zc/img/index03.png');
				var id =$(th).data('id');
				$.ajax({
					type: "post",
					url: "/index/apihq/shoucang",
					data: {id:id},
					dataType: "jsonp",
					success: function (res) {
						
					}
				});
			}else{
				$(th).removeClass('jjj1');
				$(th).addClass('jjj0');
				$(th).find('img').attr('src','/zc/img/a_xingxing.png');
				
				var id =$(th).data('id');
				$.ajax({
					type: "post",
					url: "/index/apihq/shoucang",
					data: {id:id},
					dataType: "jsonp",
					success: function (res) {
						
					}
				});
			}
		}
	</script>
</html>
